<template>
  <div class="table_box">
    <el-table ref="tableDataRef" v-loading="loading" :data="tableData" :height="tableHeight" :border="border"
      :size="size" :table-layout="tableLayout" style="width: 100%" @selection-change="handleSelectionChange"
      element-loading-text="拼命加载中..." :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50">
      <template #empty v-if="showEmpty">
        <el-empty :image-size="80" description="暂无数据"></el-empty>
      </template>
      <!-- <el-table-column v-if="selection" align="center" width="55" type="selection" /> -->
      <el-table-column v-if="selection && selectTable == false" align="center" width="55" type="selection" />
      <el-table-column v-if="selection && selectTable" align="center" width="55" type="selection"
        :selectable="selectableFun" />
      <el-table-column v-if="showIndex" align="center" width="100" type="index" label="序号"
        :index="indexMethod"></el-table-column>
      <el-table-column v-for="(item,index) in columns" :key="index" :align="item.align" :prop="item.prop"
        :label="item.label" :fixed="item.fixed" :width="item.width" :min-width="item.minWidth"
        :show-overflow-tooltip="item.showOverflowTooltip">
        <template #default="scope">
          <span v-if="item.slot == 'orderNumber'">{{
            (currentPage - 1) * pageSize + scope.$index + 1
            }}</span>
          <slot v-if="item.slot" :row="scope.row" :index="scope.$index" :name="item.slot"></slot>
          <span :class="[item.isClick ? 'is-click' : '']" @click="handleCopy(scope.row[item.prop],item.isClick)"
            v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : '--'
            }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;align-items: center;justify-content: flex-end;margin-top: 20px;">
      <el-pagination v-if="isPagination" :page-sizes="pageSizeOptions" background :layout="layout" :small="small"
        :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script setup name="Table">
  // import { defineExpose } from "vue"
  const emit = defineEmits()
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    // 表格数据
    tableData: {
      type: Array,
      default: []
    },
    // 表头数据
    columns: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 表格高度
    tableHeight: {
      type: [Number, String],
      default: 'auto'
    },
    // 边框
    border: {
      type: Boolean,
      default: false
    },
    // 是否多选
    selection: {
      type: Boolean,
      default: false
    },
    // 是否展示序号
    showIndex: {
      type: Boolean,
      default: false
    },
    // 是否展示无数据
    showEmpty: {
      type: Boolean,
      default: true
    },
    // 设置表格单元、行和列的布局方式 fixed / auto
    tableLayout: {
      type: String,
      default: 'fixed'
    },
    // 分页总数
    total: {
      type: Number,
      default: 0
    },
    // 当前分页
    currentPage: {
      type: Number,
      default: 1
    },
    // 分页数
    pageSize: {
      type: Number,
      default: 10
    },
    // 指定每页可以显示多少条
    pageSizeOptions: {
      type: Array,
      default() {
        return [10, 20, 30, 40, 50, 100, 200, 500, 1000]
      },
    },
    size: {
      type: String,
      default: "default" // large / default / small
    },
    // 设置表格单元、行和列的布局方式 fixed / auto
    tableLayout: {
      type: String,
      default: 'fixed'
    },
    selectTable: {
      type: Boolean,
      default: false
    },
    selectableFun: Function,
    // 是否展示分页器
    isPagination: {
      type: Boolean,
      default: true
    },
    // 分页布局
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    // 是否使用小型分页样式
    small: {
      type: Boolean,
      default: false
    },
  })
  const handleCopy = (row, isClick) => {
    if (isClick) {
      proxy.clickCopyFun(row)
    }
  }
  const tableDataRef = ref()
  const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
  function indexMethod(index) {
    // console.log(index, '123');
    return (props.currentPage - 1) * props.pageSize + index + 1
  }
  const clearTableSelection = () => {
    tableDataRef.value.clearSelection()
  }
  //表单选择全选
  const handleSelectionChange = (val) => {
    // console.log(val, 'handleSelectionChange')
    emit("handleSelectionChange", val)
  }
  const handleCurrentChange = (val) => {
    emit("changeCurrent", val)
  }
  const handleSizeChange = (val) => {
    emit('changeSize', val)
  }
  const selectable = (row, index) => {
    console.log(row, 'ABCDEFG-table-row');
    console.log(index, 'ABCDEFG-table-index');
    console.log(selectableFun, 'ABCDEFG-table-selectableFun');
  }
  // 父组件调用子组件的方法，如果使用了<script setup> 这种写法，那么子组件方法需要采用defineExpose()进行修饰，才能被外界调用
  defineExpose({ clearTableSelection })
</script>
<style lang="scss" scoped>
  .is-click {
    cursor: pointer;
  }

  .is-click:hover {
    color: #409eff;
  }
</style>
